<template>
	<view class="app">
		<view class="jx-mybg-box">
			<view class="jx-my-bg" style="background-color: #fcc80e;"></view>
			<view v-if="userInfo && configData.user_center" class="jx-header-center"
				:class="configData.user_center.top_style == 3 ? 'right' : configData.user_center.top_style == 2 ? 'top' : ''">
				<image :src="userInfo.avatar || configData.user_center.member_pic_url" class="jx-avatar"></image>
				<view class="jx-info">
					<view class="jx-nickname">
						<view class="nickname">{{ userInfo.nickname || '点击头像去设置昵称' }}</view>
					</view>
					<view class="flex flex-y-center">
						<view class="user-id">账号:BSH{{ userInfo.user_id }}</view>
					</view>
				</view>

			</view>
			<block v-else>
				<view v-if="configData.user_center" class="jx-header-center flex flex-y-center" :class="{'flex-col':configData.user_center.top_style == 2,'marginB':configData.user_center.top_style == 2}">
					<image :src="configData.user_center.member_pic_url" class="jx-avatar"></image>
					<button type="primary" class="jx-info" @click="userLogin" style="margin-left: 0;margin-right: 0;">点击登录/注册</button>
				</view>
			</block>
		</view>
		
		<view class="jx-content-box" v-if="configData.user_center">
			<view class="jx-header-btm">
				<view class="jx-btm-item" @click="openUrl('/pages/user/balance/details?name=balance')">
					<view class="jx-btm-num">{{ userInfo.balance }}</view>
					<view class="jx-btm-text">{{currencyAlias.balance_alias}}</view>
				</view>
				<view class="jx-btm-item" @click="openUrl('/pages/user/integral/integral?name=total_score')">
					<view class="jx-btm-num">{{ userInfo.total_score }}</view>
					<view class="jx-btm-text">{{currencyAlias.integral_alias}}</view>
				</view>
				<view class="jx-btm-item last" @click="openUrl('/mch/redBag/redBag?name=redBag')">
					<view class="jx-btm-num">{{ Number(userInfo.static_integral) }}</view>
					<view class="jx-btm-text">{{currencyAlias.red_envelope_alias}}</view>
				</view>
				<view class="jx-btm-item last" @click="openUrl('/mch/vouchers/vouchers?name=shopping_voucher')">
					<view class="jx-btm-num">{{ Number(userInfo.shopping_voucher)}}</view>
					<view class="jx-btm-text">{{currencyAlias.silver_beans_alias}}</view>
				</view>
			</view>

			
			<view class="jx-box jx-order-box">
				<toolbar
					:toolbarTitle="'我的服务'"
					:flex="`2`"
					:toolbarData="localLifeMenu"
				></toolbar>
			</view>

		</view>
		<hans-tabber style="position:fixed;bottom:0;width:100%;left:0;right:0;"></hans-tabber>
	</view>
</template>

<script>
	import hansTabber from '@/components/hans-tabbar/hans-tabbar.vue';
	import {formatTimeToStr} from '@/utils/date.js';
	export default {
		components:{
			hansTabber,
		},
		data(){
			return {
				img_url: this.$api.img_url,
				data: null,
				loading: false,
				type: 1,
				curfirstDayOfMonth:'',//本月第一天
				lastfirstDayOfMonth:'',//上月第一天
				curDate:'',//当前日期
				
				configData: {
					copyright: null,
					title_bar: null,
					user_center: null
				},
				userInfo: {
					mobile:0,
					balance: 0,
					score: 0,
					total_score:0,
					coupon: 0,
					dynamic_integral:0,
					static_integral:0,
					shopping_voucher:0,
				},
				currencyAlias:{
					balance_alias: '',
					red_envelope_alias: '',
					integral_alias: '',
					silver_beans_alias: '',
				},
				mytoken:0,
				localLifeMenu:[
					{
						icon_url:"http://cos.zaituan.com.cn/uploads/images/original/20240829/3c5aad387ab7e19b260cceab2cb46b94.png",
						link_url:"/pages/order/beused/beused",
						name:"核销订单",
						num:"",
						open_type:"navigate",
						text:""
					},
					{
						icon_url:"http://cos.zaituan.com.cn/uploads/images/original/20240823/36fb0443afbf15c97aaa777ebe121724.png",
						link_url:"/pages/index/index",
						name:"兰亭首页",
						num:"",
						open_type:"navigate",
						text:""
					},
					{
						icon_url: "http://cos.zaituan.com.cn/uploads/images/original/20240829/010019c5908a046d8c07d0aea48fb588.png",
						link_url: "/plugins/extensions/poster?union_type=local_life_share",
						name: "生成海报",
						open_type: "navigate"
					},
					{
						icon_url: "http://cos.zaituan.com.cn/uploads/images/original/20250210/8edb52eb773c919e2fb4a966fa9db49f.png",
						link_url: "/plugins/local_life/flowGoods",
						name: "本地生活",
						open_type: "navigate"
					},
					{
						icon_url: "https://cos.zaituan.com.cn/uploads/images/original/20250210/886783f0a42e70d9c0855c68f807a110.png",
						link_url: "/plugins/purchasing/goods_stock?goods_type=2",
						name: "商品库存",
						open_type: "navigate"
					},
					{
						icon_url: "http://cos.zaituan.com.cn/uploads/images/original/20240829/802b594b43f7387513380544e1b51560.png",
						link_url: "/plugins/local_life/index",
						name: "再团收益",
						open_type: "navigate"
					},
					
				]
			}
		},
		onLoad(opt){
			let currencyAliasConfig = uni.getStorageSync('currencyAlias');
			if(currencyAliasConfig){
				JSON.parse(currencyAliasConfig);
				this.currencyAlias = JSON.parse(currencyAliasConfig);
			}
			
			if (uni.getStorageSync('token')) {
				this.mytoken = uni.getStorageSync('token');
			}else{
				this.mytoken=0
				uni.removeStorageSync('addressID')
				uni.showModal({
					title: "提示",
					content: "您还未登录，去登录吧~",
					confirmText: "去登录",
					showCancel:false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/public/login'
							});
						}
					}
				});
			}
			
			let currentDate = new Date();
			this.curfirstDayOfMonth = this.formatTimeToStr(new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getTime());
			this.lastfirstDayOfMonth = this.formatTimeToStr(new Date(currentDate.getFullYear(), currentDate.getMonth()-1, 1).getTime());
			this.curDate = this.formatTimeToStr(new Date().getTime());

		},
		onShow() {
			this.$http.isLogin() && this.getUser(false);
			if(uni.getStorageSync('token')){
				this.initData(false);
			}
			this.getData();
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value,'yyyy-MM-dd')
			}
		},
		methods:{
			async getUser(bool) {
				this.loading = bool;
				let res = await this.$http.request({
					url: this.$api.localLife.userInfo,
					method: 'POST',
					showLoading: true
				});
				this.loading = false;
				if (res.code == 0) {
					this.userInfo = res.data;	
					if(this.localLifeMenu.length <= 6){//避免多次push
						if(this.userInfo.mch_id > 0){
							this.localLifeMenu.push({
								icon_url: "http://cos.zaituan.com.cn/uploads/images/original/20240829/802b594b43f7387513380544e1b51560.png",
								link_url: "/mch/personalCentre/personalCentre",
								name: "再团商家",
								open_type: "navigate"
							});
						}else if(this.userInfo.is_mch_child > 0){
							this.localLifeMenu.push({
								icon_url: "http://cos.zaituan.com.cn/uploads/images/original/20240829/802b594b43f7387513380544e1b51560.png",
								link_url: "/mch/personalCentre/subAccount/chooseMch",
								name: "再团商家",
								open_type: "navigate"
							});
						}else{
							this.localLifeMenu.push({
								icon_url: "http://cos.zaituan.com.cn/uploads/images/original/20240829/802b594b43f7387513380544e1b51560.png",
								link_url: "/mch/enter/enter",
								name: "商家入驻",
								open_type: "navigate"
							});
						}
					}
				}
			},
			
			async initData() {
				let res = await this.$http.request({
					url: this.$api.index.userConfig
				})
				if (res.code === 0) {
					this.configData = res.data.config;
					this.userMessage=res.data.config;
					uni.setStorageSync('initMenus', JSON.stringify(res.data.config));
					if(res.wechat_subscribe==1){
						this.showFoucs=false
					}else{
						this.showFoucs=true
					}
				}
			},
			
			openUrl(url){
				uni.navigateTo({url})
			},
			
			async getData() {
				this.loading = true;
				let res = await this.$http.request({
					url: this.$api.localLife.statisticsTotal,
					method: 'POST'
				});
				this.loading = false;
				if (res.code == 0) {
					this.data = res.data;
				}
			},
		}
	}
</script>

<style lang="scss">
	.jx-mybg-box {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
	}
	
	.jx-my-bg {
		width: 100%;
		height: 420rpx;
		display: block;
		position: absolute;
		top: 0;
	}
	.jx-header-center {
		width: 100%;
		// height: 128rpx;
		padding: 80rpx 30rpx 60rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
	
		&.top {
			justify-content: center;
			flex-direction: column;
			margin-bottom: 36rpx;
	
			.jx-info {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				align-items: center;
	
				.jx-nickname {
					margin: 0;
				}
			}
		}
	
		.withdraw {
			position: absolute;
			right: 0;
			color: #ffffff;
			.icon-text {
				align-items: center;
				background: rgba(0, 0, 0, 0.2);
				font-size: 9pt;
				line-height: 54rpx;
				padding: 0 20rpx;
				border-bottom-left-radius: 27rpx;
				border-top-left-radius: 27rpx;
	
				.img {
					height: 37rpx;
					width: 37rpx;
					margin-right: 10rpx;
				}
	
				.icon {
					font-size: 11pt;
					line-height: 26px;
	
					&.icon-tixian {
						margin-left: 10rpx;
					}
				}
	
				.text {
					margin-left: 6rpx;
				}
			}
		}
	}
	.marginB{
		padding: 60rpx 30rpx 20rpx;
	}
	
	.icon-img {
		background-size: 100%;
		background-repeat: no-repeat;
	}
	
	.jx-avatar {
		flex-shrink: 0;
		width: 128rpx;
		height: 128rpx;
		display: block;
		border-radius: 50px;
	}
	
	.jx-info {
		// width: 60%;
		margin-left: 20rpx;
		color: #ffffff;
		background: transparent;
		/* #ifdef MP-WEIXIN */
		flex-grow: 1;
		text-align: left;
		/* #endif */
	
		.jx-nickname {
			font-size: 14pt;
			font-weight: 400;
			display: flex;
			align-items: center;
			margin-bottom: 4rpx;
	
			.nickname {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 240rpx;
			}
		}
	
		.user-id {
			font-size: 10pt;
			margin-left: 10rpx;
		}
	}
	
	.jx-img-vip {
		height: 36rpx;
		// margin-left: 18rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		color: #FF7104;
		padding: 0 10rpx;
		border-radius: 19rpx;
		line-height: 18px;
		.vip_url {
			width: 28rpx;
			height: 26rpx;
		}
		.iconfont {
			font-size: 13pt;
			width: 28rpx;
			height: 20rpx;
			line-height: 26rpx;
		}
		.text {
			margin-left: 12rpx;
			font-size: 9pt;
			font-weight: 400;
		}
	}
	
	.jx-content-box {
		margin-bottom: 30rpx;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		// top: -72rpx;
		z-index: 10;
	}
	
	.jx-header-btm {
		border-radius: 12rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		background: #ffffff;
		margin-bottom: 20rpx;
	}
	.jx-btm-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 10rpx;
		position: relative;
		&::after {
			content: '';
			border-right: 1rpx solid #b3b3b3;
			width: 1px;
			height: 100rpx;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	
		&:last-child {
			&::after {
				display: none;
			}
		}
	}
	
	.jx-btm-num {
		font-size: 11pt;
		font-weight: 600;
		position: relative;
	}
	
	.jx-btm-text {
		font-size: 9pt;
		opacity: 0.85;
		padding-top: 4rpx;
	}
	
	.jx-box {
		width: 100%;
		background: #fff;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.status {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 0;
		line-height: 60rpx;
		border-bottom: 1rpx solid #f2f2f2;
		.name {
			text-align: center;
			margin: 0 10px;
		}
	}
	
	.flex {
		display: flex;
	}
	
	.flex-column-x-center {
		flex: 1;
		flex-direction: column;
		align-items: center;
	}
	
	
	.content-body{
		padding: 0 20rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		margin-bottom: 140rpx;
	}
	
	.common-box-down{
		padding: 30rpx 0;
		border-top: 1rpx solid #f2f2f2;
	}
</style>
